<template>
  <div>
    <div class="salon-nav">
      <ul id="salon-ul">
          <li v-for="item in navName">
            <router-link :to="{path:'/common/hot-course/hotCourseList',query:{category:item,title:title}}" active-class="salon-active" exact>{{item}}</router-link>
        </li>
      </ul>
    </div>
    <transition name="list" mode="out-in">
      <router-view :isLogin="isLogin"></router-view>
    </transition>
  </div>
</template>
<script>
    export default{
      data:function(){
        return {
          navName:["英语沙龙","脑洞大开","职场那些事"],
          title:"热门说课"
        }
      },
      props:["isLogin"],
      mounted:function(){
        this.$router.push({path:'/common/hot-course/hotCourseList',query:{category:'英语沙龙',title:this.title}});
     }
    }
</script>
<style scoped>
  div.salon-nav{
    background: #f4997d;
    width: 100%;
    height: 40px;
    line-height:40px;
    margin-top: 44px;
  }
  ul{
    width: 100%;
    list-style: none;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    padding-left: 0;
  }
  li{
    height: 40px;
    width: 33.3%;
    border-right: 1px solid #fff;
    text-align: center;
  }
  .salon-active{
    background: #E26537;
  }
  li:last-child{
    width: 33.4%;
    border: none;
  }
  li>a{
    display: inline-block;
    width: 100%;
    text-decoration: none;
    color: #F4CDC3;
    font-size: 16px;
  }
  .list-enter-active,.list-leave-active{
     opacity: 1;
     transform: scale(1);
     transition: all .3s linear;
  }
  .list-enter,.list-leave{
    transform: scale(0);
    opacity: 0;
  }
  @media (max-width: 320px){
    div.salon-nav{
      height: 30px;
      line-height:30px;
    }
  }
  @media (max-width: 320px) {
    div.salon-nav {
      margin-top: 0;
    }
  }
</style>
